<template>
  <div class="permission">
    <headTool>
      <template slot="after">
        <el-button type="primary" size="samll" @click="addDate('0', '1')"
          >添加权限</el-button
        >
      </template>
    </headTool>
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        :tree-props="{ children: 'children' }"
      >
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="code" label="标识"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              v-if="row.pid == '0'"
              @click="addDate(row.id, 2)"
              >添加</el-button
            >
            <el-button type="text" @click="editDate(row.id)">编辑</el-button>
            <el-button type="text" @click="deleteDate(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹出框 -->
      <el-dialog :title="title" :visible.sync="showDialog">
        <el-form :model="form" :rules="rules" label-width="80px" ref="from">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="form.code" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限描述">
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="开启">
            <el-switch
              v-model="form.enVisible"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getPermissionList,
  getPermissionDetails,
  addPermission,
  delPermission,
  updatePermission,
} from "@/api/permission";
import { arrayToTree } from "@/utils/index";
export default {
  name: "permission",
  data() {
    return {
      tableData: [],
      //弹出框是否显示
      showDialog: false,
      //弹出框表单
      form: {},
      //表单验证规则
      rules: {
        name: [
          {
            required: true,
            trigger: "blur",
            message: "请输入权限名称",
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            message: "请输入权限标识",
          },
        ],
      },
    };
  },
  created() {
    this.getPermissionList();
  },
  methods: {
    //获取权限详细列表
    async getPermissionList() {
      let res = await getPermissionList();
      //   console.log(res);
      this.tableData = arrayToTree(res.data, "0");
    },
    //新增页面
    addDate(pid, type) {
      // 如果是1级，pid为'0',type为1
      // 如果是2级，pid为当前这行权限的id，type为2
      this.showDialog = true;
      console.log(pid, type);
      this.form.pid = pid;
      this.form.type = type;
    },

    async save() {
      if (this.form.id) {
        await updatePermission(this.form);
      } else {
        await addPermission(this.form);
      }

      this.$message.success(this.title + "成功");
      this.showDialog = false;
      await this.getPermissionList();
      this.form = {};
      this.$refs.from.resetField();
    },
    //编辑页面
    async editDate(id) {
      this.showDialog = true;
      let res = await getPermissionDetails(id);
      console.log(res);
      this.form = res.data;
    },
    //取消页面
    cancel() {
      this.form = {};
      this.$refs.from.resetField();
      this.showDialog = false;
    },
    //删除页面
    async deleteDate(id) {
      await this.$confirm("确定要删除这个权限", "温馨提示");
      await delPermission(id);
      await this.getPermissionList();
      this.$message.error("删除成功");
    },
  },
  computed: {
    title() {
      return this.form.id ? "编辑权限" : "新增权限";
    },
  },
};
</script>

<style lang='scss'>
.el-card {
  margin: 0 20px;
}
</style>